<template>
	<view class="warp">
		<view class="nav-header header" :style="{backgroundImage:'url('+tui.website+'static/home/img/topbg4.png)',paddingTop:top+'px'}">
			<view class="page-title" style="color: #FFF;">
				<view class="back-btn">
					<tui-icon name="arrowleft" color="#fff" @click="back"></tui-icon>
				</view>
				<text>我的二维码</text>
			</view>
		</view>
		<!-- :style="{backgroundImage:'url('+tui.website+'static/home/img/qrbg.png)'}" -->
		<view class="shareimgbox" v-show="isShow" >
			<view class="mycard">
				<view class="avatar">
					<image src="../../static/avatar.jpeg" mode="widthFix" v-if="!userInfo"></image>
					<image :src="userInfo.avatar" mode="widthFix" v-if="userInfo"></image>
					<view class="username">
						{{userInfo.nickname}}【{{userInfo.mobile}}】
					</view>
				</view>
				<view class="mycard-body">
					<view class="tip1"><text>正邀请您进入</text><text class="company">韩亚（天津）</text></view>
					<view>
						<image :src="rcode" mode="widthFix"></image>
					</view>
					<view class="tip2"><text>立即扫码</text></view>
					<view class="tip3"><text>享受折扣优惠和专属服务</text></view>
				</view>
			</view>
		</view>
		
		<view>
			<tui-button type="danger" shape="circle" @click="reset(1)" >重新生成</tui-button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top:0,
				isShow:1,
				rcode:'',
				userInfo:[],
			}
		},
		onLoad() {
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth;
					this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					// this.scrollH = res.windowWidth * 0.6
				}
			})
			this.reset(0);
			this.getUserInfo();
		},
		methods: {
			reset(v){
				this.isShow =0;
				uni.showLoading()
				this.tui.get('user/api/codeimg?v='+v).then(res=>{
					if(res.code){
						this.isShow=1;
						this.rcode = res.data;
					}else{
						this.tui.toast(res.msg);
					}
					uni.hideLoading();
				})
				
			},
			getUserInfo: function() {
				let it = this;
				this.tui.request('user/api/getuser', 'GET').then(function(res) {
					// console.log(res);
					if (res.code == 1) {
						it.userInfo = res.data;
					}
				})
			},
			back(){
				uni.navigateBack({
					
				})
			},
		}
	}
</script>

<style>
	.header{
		background-repeat: no-repeat;
		background-size: 100% auto;
		z-index: 99999999999;
	}
	.shareimgbox{
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
		padding: 80px 0 40px 0;
		margin-top: 20px;
		margin-bottom: 20px;
		/* background-color: #fe5c84 !important; */
		background-image: linear-gradient(to right, #fe6087 , #fd4573);
	}
	.mycard{
		position: relative;
		margin-top: 100rpx;
	}
	.avatar{
		position: relative;
		margin-top: -100rpx;
		width: 100%;
		text-align: center;
	}
	.avatar image{
		width: 160rpx;
		height: 160rpx;
		border-radius: 160rpx;
	}
	.avatar .username{
		padding: 20upx;
	}
	.mycard-body>view{
		text-align: center;
	}
	.mycard-body .tip1{
		color: #000000;
		font-weight: 700;
		text-align: center;
	}
	.mycard-body .tip1 .company{
		color: #FF0000;
		padding-left:20upx;
	}
	.mycard-body image{
		padding: 20upx;
		width: 80%;
	}
	.mycard-body .tip2{
		color: #666;
		padding:20upx;
	}
	.mycard-body .tip3{
		color: #000;
		padding:20upx;
	}

</style>
